<template>
  <page-layout :desc="desc" :linkList="linkList">
    <div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
      <img :src="extraImage" />
    </div>
    <template v-if="this.btnName && !isMobile" slot="action">
      <a-button
        v-auth:permission="btnPermission"
        shape="round"
        :icon="this.btnIcon"
        @click="handleBtnEvent"
        type="primary"
      >
        {{ btnName }}
      </a-button>
    </template>
    <a-spin :delay="delayTime" :size="spinSize" :spinning="loading">
      <page-toggle-transition
        :disabled="animate.disabled"
        :animate="animate.name"
        :direction="animate.direction"
      >
        <router-view ref="page" />
      </page-toggle-transition>
    </a-spin>
  </page-layout>
</template>

<script>
  import PageLayout from './PageLayout'
  import PageToggleTransition from '../components/transition/PageToggleTransition'
  import { mapState } from 'vuex'

  export default {
    name: 'PageView',
    components: { PageToggleTransition, PageLayout },
    data() {
      return {
        delayTime: 500,
        spinSize: 'large',
        page: {},
      }
    },
    computed: {
      ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'loading']),
      desc() {
        return this.page.desc
      },
      linkList() {
        return this.page.linkList
      },
      extraImage() {
        return this.page.extraImage
      },
      btnName() {
        return this.page.btnName
      },
      btnIcon() {
        return this.page.btnIcon
      },
      btnPermission() {
        return this.page.btnPermission
      },
    },
    mounted() {
      this.page = this.$refs.page || {}
      console.log('page--------', this.page)
      console.log('this.$refs.page--------', this.$refs.page)
    },
    updated() {
      this.page = this.$refs.page || {}
    },
    methods: {
      handleBtnEvent() {
        if (this.page.handleBtnEvent) {
          this.page.handleBtnEvent()
        }
      },
    },
  }
</script>

<style lang="less" scoped>
  .extraImg {
    width: 195px;
    margin-top: -60px;
    text-align: center;
    img {
      width: 100%;
    }
  }
  /deep/ .ant-spin-blur {
    overflow: hidden;
    clear: both;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 1;
  }
</style>
